<template>

	<view class="common">
		<uni-nav-bar :fixed="true" color="#fff" background-color="rgba(255,255,255,0)" :border="false" left-icon="left"
			status-bar title="选择城市" />
		<view class="main">

			<view class="des">
				<view class="flag">
					当前定位：
				</view>
				<view class="city">
					<view>
						焦作市
					</view>
					<view class="reload">
						<image src="/pacakgeBase/static/3.1-刷新@3x.png" mode=""></image>
						<view>
							重新定位
						</view>
					</view>
				</view>
			</view>

			<view class="tagCard">
				<view
					style="font-size: 35rpx ; font-weight:600; border-bottom: 8rpx solid #f7f7f7; padding:30rpx 0rpx;">
					热门城市
				</view>

				<view>
					<uni-grid :column="3" style="column-gap: 20rpx;" borderColor="##f7f7f7" :show-border="false"
						:square="false" :highlight="true" @change="change">
						<uni-grid-item v-for="(item, index) in 8" :index="index" :key="index">

							<view class="grid-item-box">
								<text class="text">文本信息</text>
							</view>
						</uni-grid-item>
					</uni-grid>

				</view>

			</view>

			<view class="tagList">
					<uni-indexed-list :options="list" :show-select="false" @click="bindClick" />
			</view>
							
			
			
			

		</view>

	</view>



	
</template>

<script>
	import citys from '@/pacakgeBase/static/js/citys.js'
	export default {
		components: {},
		data() {
			return {
				list: citys.list,
				titleBg: 'rgba(255,255,255,0)'

			}
		},
		methods: {
			bindClick(e) {
				console.log('点击item，返回数据' + JSON.stringify(e))
			}
		}
	}
</script>

<style scoped>
	.des {

		display: flex;
		flex-direction: column;
		row-gap: 20rpx;
		color: #fff;

	}

	.des>.flag {
		font-size: 35rpx;
	}

	.city {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.reload {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		column-gap: 20rpx;
	}

	.reload image {
		width: 25rpx;
		height: 25rpx;
		vertical-align: min;

	}

	.uni-navbar__content {
		background-color: rgba(255, 255, 255, 0) !important;
	}



	/* 九宫格 */
	.tagCard {

		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		row-gap: 30rpx;
	}


	


	/*九宫格 整体背景 list  */
	::v-deep .uni-grid {
		background-color: #fff;
		column-gap: 10rpx;
		row-gap: 15rpx;


	}

	/*九宫格 每个元素list  */
	::v-deep .uni-grid-item {
		width: 210rpx !important;
		/* item 宽度 必须放在这里*/
		border-radius: 100rpx;
		/* background-color: rgba(255, 255, 255, 0) ; */

	}

	::v-deep .grid-item-box {
		/* width: 220rpx; */
		/* 标签背景颜色 */
		background-color: #f7f7f7;

		/* background-color: #0000ff; */
		/* background-color: rgba(255, 255, 255, 0); */
		border-radius: 100rpx;
		text-align: center;
		line-height: 70rpx;
		height: 70rpx;
		padding: 10rpx 15rpx;
		color: #929292;


	}


	::v-deep .uni-list-item__content-title {
		color: #929292;
	}

	::v-deep .uni-list--border {
		border: 0rpx;
	}

	.uni-grid-item__box,
	.uni-grid-item--borde {
		border: 0rpx;
	}
	
	
	
	
	
	/* 列表 */
	
	

	.common > .main{
		height: 100vh;
	}
	.tagList{
		position: relative;
		height: 800rpx;
		width: 100%;
	}
	::v-deep .uni-indexed-list__list{
		background-color: #fff;
	}
::v-deep  .uni-indexed-list__title-wrapper{
	background-color: #fff;
}
	::v-deep .uni-indexed-list__menu-text{
		display:none;
	}
	::v-deep .uni-indexed-list{
		  position: absolute;
		    left: 0;
		    top: 0rpx;
		    right: 0;
		    bottom: 0; /* 修改这里，距离底部 100rpx */
		    display: flex;
		    flex-direction: row;
	}
	
</style>



